import { defineComponent, reactive, ref, computed } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import voucherConfirmationService from "@/modules/groupOrderManagement/voucherConfirmation.service";
import useNavigator from "@/hooks/useNavigator";
import { message, Modal } from "ant-design-vue";
import Voucher from "./popup/voucher/voucher";
import {
  $groupOrderPeopleList,
  $groupOrderExportData,
} from "@/api/groupOrder/groupOrder";
import useXlsx from "@/hooks/useXlsx";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const addRef = ref(null as any);
    const voucherRef = ref(null as any);
    const visible = ref(false);
    const numberProgress = ref(0);
    const xlsx = useXlsx();
    const title = ref("" as any);
    const state = reactive({
      toolbar: {
        left: ["refresh"],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          align: "center",
          width: "80px",
        },
        {
          title: "系统订单号",
          dataIndex: "order_no",
          align: "center",
          width: "100px",
        },
        {
          title: "投保单位名称",
          dataIndex: "applicant_name",
          align: "center",
          width: "180px",
        },
        // {
        //   title: "投保单位证件号",
        //   dataIndex: "applicant_id_no",
        //   align: "center",
        //   width: "120px",
        // },
        {
          title: "联系人姓名",
          dataIndex: "contact_name",
          align: "center",
          width: "100px",
        },
        {
          title: "联系电话",
          dataIndex: "applicant_mobile",
          align: "center",
          width: "100px",
        },
        // {
        //   title: "渠道负责人",
        //   dataIndex: "realname",
        //   align: "center",
        //   width: "100px",
        // },
        {
          title: "参保人数",
          dataIndex: "people_count",
          align: "center",
          width: "80px",
        },
        {
          title: "总金额",
          dataIndex: "sum_premium",
          align: "center",
          width: "80px",
        },
        {
          title: "状态",
          dataIndex: ["order_status", "label"],
          align: "center",
          width: "100px",
        },
        {
          title: "上传时间",
          dataIndex: "create_time",
          align: "center",
          width: "180px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "100px",
        },
      ],
      loading: false,
      searchForm: {
        contact_name: {
          type: "input",
          label: "联系人姓名",
          attrs: { placeholder: "请输入联系人姓名" },
        },
        insure_id_no: {
          type: "input",
          label: "被保人证件号",
          attrs: { placeholder: "请输入被保人证件号" },
        },
        order_status: {
          type: "select",
          label: "状态",
          attrs: { placeholder: "请选择状态" },
          datas: [
            { label: "凭证待确认", value: 10 },
            { label: "确认失败", value: 12 },
            { label: "已取消", value: 1000 },
            { label: "待承保", value: 11 },
          ],
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    } as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      };
    });
    // 服务
    const $service = new voucherConfirmationService();
    // 表格节点
    const LTableRef = ref(null as any);
    const DetailRef = ref(null as any);
    const tableRow = (e: any) => {
      LTableRef.value.$fetchTableData();
    };
    const deleteRow = (id: string | number) => {
      Modal.confirm({
        title: "提示",
        content: "确认取消?",
        onOk: () => {
          $service
            .delete({
              order_no: id,
            })
            .then((res: any) => {
              LTableRef.value.$fetchTableData();
            });
        },
      });
    };
    const exportData = (e: any, order_no: any) => {
      $groupOrderExportData({
        order_no: order_no,
        number: e,
      }).then((res: any) => {
        numberProgress.value =
          ((res?.data?.finish || 0) / (res?.data?.total || 0)) * 100;
        if (res?.data?.status === 1) {
          window.open(res.data.url);
        } else if (res?.data?.status === 10) {
          exportData(e, order_no);
        } else if (res?.data?.status === -1) {
          visible.value = false;
          message.error("导出清单失败,请联系技术人员");
        }
      });
    };
    return () => (
      <Page>
        <CardWithTitle title="凭证确认">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
             // row-selection={rowSelection.value}
              loading={state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // // 操作栏
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                        {record.order_status.value == 10 && (
                          <a-button
                            type="primary"
                            size="small"
                            onClick={() => {
                              voucherRef.value.open(
                                record.order_no,
                                record.order_status.value
                              );
                            }}
                          >
                            缴费确认
                          </a-button>
                        )}
                        {record.order_status.value == 11 && (
                          <a-button
                            type="primary"
                            size="small"
                            onClick={() => {
                              voucherRef.value.open(
                                record.order_no,
                                record.order_status.value
                              );
                            }}
                          >
                            查看凭证
                          </a-button>
                        )}
                        <a-button
                          type="primary"
                          size="small"
                          onClick={() => {
                            navigator.push({
                              path: "/groupOrderManagement/voucherConfirmationDetailPage",
                              query: {
                                order_no: record.order_no,
                              },
                            });
                          }}
                        >
                          查看清单
                        </a-button>
                        <a-button
                          type="primary"
                          size="small"
                          onClick={async () => {
                            title.value = "正在导出文件...";
                            xlsx.init({
                              limit: 2000,
                              otherParams: {
                                order_no: record.order_no,
                              },
                              service: $groupOrderPeopleList,
                            });
                            await xlsx.defineList([
                              {
                                label: "系统保单号",
                                value: "order_no",
                                width: 25,
                              },
                              {
                                label: "保司保单号",
                                value: "insurance_order_no",
                                width: 25,
                              },
                              {
                                label: "续保/新保",
                                value: ["is_new", "label"],
                                width: 25,
                              },
                              {
                                label: "被保人姓名",
                                value: "name",
                                width: 25,
                              },
                              {
                                label: "证件号码",
                                value: "id_no",
                                width: 25,
                              },
                              {
                                label: "出生日期",
                                value: "birthday",
                                width: 25,
                              },
                              {
                                label: "年龄",
                                value: "age",
                                width: 5,
                              },
                              {
                                label: "性别",
                                value: ["sex", "label"],
                                width: 5,
                              },
                              {
                                label: "手机号",
                                value: "mobile",
                                width: 20,
                              },
                              {
                                label: "所在市",
                                value: ["city_id", "label"],
                                width: 20,
                              },
                              {
                                label: "所在区",
                                value: ["area_id", "label"],
                                width: 20,
                              },
                              {
                                label: "所在乡镇/街道",
                                value: ["street_id", "label"],
                                width: 25,
                              },
                              {
                                label: "所在村/社区",
                                value: ["village_id", "label"],
                                width: 25,
                              },
                              {
                                label: "商保/低保",
                                value: ["people_type", "label"],
                                width: 20,
                              },
                              {
                                label: "本次生效日期",
                                value: "people_start_date",
                                width: 25,
                              },
                              {
                                label: "承保时间",
                                value: "insure_time",
                                width: 25,
                              },
                              {
                                label: "状态",
                                value: ["order_status", "label"],
                                width: 20,
                              },
                            ]);
                            await xlsx.exportToExcel("下载清单.xlsx");
                          }}
                        >
                          下载清单
                        </a-button>
                        {(record.order_status.value == 0 ||
                          record.order_status.value == 10 ||
                          record.order_status.value == 12) && (
                          <a-button
                            type="primary"
                            size="small"
                            danger
                            onClick={() => deleteRow(record.order_no)}
                          >
                            取消团单
                          </a-button>
                        )}
                      </div>
                    );
                  }
                },
              }}
            />
          </LTable>
          <Voucher
            ref={voucherRef}
            onConfirm={(e: any) => {
              tableRow(e);
            }}
          />
        </CardWithTitle>
        {
          <a-modal
            v-model:visible={visible.value}
            width="1000px"
            title="清单下载进度"
            closable={false}
            maskClosable={false}
            ok-button-props={{
              disabled: numberProgress.value == 100 ? false : true,
            }}
            cancel-button-props={{
              disabled: numberProgress.value == 100 ? false : true,
            }}
            onOk={() => {
              visible.value = false;
            }}
            cancel={() => {
              visible.value = false;
            }}
          >
            <a-progress percent={numberProgress.value} />
          </a-modal>
        }
      </Page>
    );
  },
});
